<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSX规则</title>
  <style>
      .header {
          text-align: center;
      }
  </style>
</head>
<body>
<div id="app"></div>
<div id="app2"></div>
<script src="../lib/babel.min.js"></script>
<script src="../lib/react.development.js"></script>
<script src="../lib/react-dom.development.js"></script>
<script type="text/babel">
  const myID = 'LaAe'
  const content = 'F*ck U!!!!!'
  const vDom = (
    <h1 id={myID.toLowerCase()} className="header">
      <span style={{color: 'orange'}}>{content.toUpperCase()}</span>
    </h1>
  )
  ReactDOM.render(vDom, document.getElementById('app'));
  /*
  {}来读取变量
  style要写成对象: {{key:value}}
  class要写成className=
   */
  const arr = ['Angular', 'React', 'Vue']
  const vDOM1 = (
    <div>
      <ul>
        {arr.map((item, index) => {
          return <li id={index + '' + item}>{item}</li>
        })}
      </ul>
    </div>
  )
  ReactDOM.render(vDOM1, document.getElementById('app2'));
</script>
</body>
</html>
